Vuetify Radio Button Default Checked/Selected:To set a default checked/selected option for a Vuetify radio button, you can use the v-model directive to bind the selected value to a data property in the Vue instance. Then, you can set the initial value of that data property to the value of the option that you want to be checked/selected by default.
How can I set a default checked/selected option for a Vuetify Radio Button ?
The code shows how to set a default checked/selected option for a Vuetify Radio Button using the v-model directive and the data() method.
Inside the v-radio-group component, there are three v-radio components each with a label and a value. The v-model directive is used to bind the selectedOption data property to the group of radio buttons.
In the data() method, the selectedOption is set to ‘option1’ as the default checked value.
Vuetify Radio Button Default Checked/Selected Example
<v-radio-group v-model="selectedOption">
<v-radio label="Option 1" value="option1"></v-radio>
<v-radio label="Option 2" value="option2"></v-radio>
<v-radio label="Option 3" value="option3"></v-radio>
</v-radio-group>
<script type="module">
const app = createApp({
data() {
return {
selectedOption: 'option1', // set 'option1' as the default checked value
};
},
}).use(vuetify).mount('#app'); // Mount the app to the #app element
</script>
Output of Vuetify Radio Button Default Checked/Selected
